<!--
 * @Description: 
 * @Author: Pengfei Zhang
 * @Date: 2021-09-03 15:42:29
 * @LastEditors: Pengfei Zhang
 * @LastEditTime: 2021-09-15 16:52:10
-->
<template>
  <view class="task-status-flag" :class="colorList[state]">
    <TaskStatusBar 
      :state="state" 
      :defaultColor="true"
    />
  </view>
</template>

<script>
import TaskStatusBar from '@/components/taskStatusBar';

export default {
  props: {
    state: {
      type: [Number, String]
    }
  },
  components: {
    TaskStatusBar,
  },
  data() {
    return {
      status: {
        1: '待执行',
        2: '执行中',
        3: '疑问反馈',
        4:'疑问反馈',
        5: '已取消',
        6: '已完成',
      },
      colorList:{
        1: 'daichuli',
        2: 'zhihangzhong',
        3: 'yiwenfankui',
        4: 'yiwenfankui',
        4: 'yijingquxiao',
        5: 'yiwancheng',
      }
    }
  },
  methods:{
  }
}
</script>

<style lang="scss" scoped>
.task-status-flag{
  display:flex;
  align-items: center;
  justify-content: center;
  height: 38rpx;
  border-radius: 0 100rpx 100rpx 0;
  background: var(--background-color);
  box-shadow: var(--box-shadow);
  padding:0 10rpx 0 8rpx;
}

.task-status-flag::after{
  content:'';
  position: absolute;
  left:0rpx;
  top:38rpx;
  width: 0;
  height: 0;
  border-top: var(--tan-border-top);
  border-left: 18rpx solid transparent;
}

.daichuli {
  --background-color: #FF5151;
  --box-shadow:0px 0px 4px rgba(255, 81, 81, 0.5);
  --tan-border-top:18rpx solid #F4C2C2;
}
.zhihangzhong {
  --background-color: #027AFF;
}
.yiwenfankui {
  --background-color: #F8AF33;
}
.yijingquxiao {
  --background-color: rgba(0, 0, 0, .3);
}
.yiwancheng {
  --background-color: #00D694;
}
</style>